import React, { Component } from "react";
import Mounth from "./mounth/index";
import dayjs from "dayjs";
// 日历组件
import "./index.scss";
export default class Calendar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      currentDay: this.props.day
        ? this.props.day
        : dayjs().format("YYYY-MM-DD"),
      mode: this.props.mode === "range" ? this.props.mode : "single",
      endDay: null,
      status: "start"
    };
    this.topstyle = {};
    this.pzl_calendar_style = { height: "100%" };
    this.getDate = this.getDate.bind(this);
    this.disabledDate = this.disabledDate.bind(this);
  }

  componentDidMount() {
    // console.log("DOM", (this.refs["topbar"].style = "background:red;"));
    const topdom = this.refs["topbar"];
    const vh = topdom.offsetHeight;
    console.log("加载");
    this.topstyle = { top: `${vh}px` };
  }

  setchange(d) {
    if (this.props.onChange) {
      this.props.onChange(d);
    }
  }

  disabledDate(current) {
    //
    if (this.props.disabledDate) {
      return this.props.disabledDate(current);
    }
  }
  handleclick() {
    //点击显示日历
    this.setState({
      show: !this.state.show
    });
  }
  getDate(d, e) {
    // console.log("付组件", this.s);
    if (this.state.mode === "range") {
      if (this.state.status === "start") {
        console.log("开始日期");
        this.setState({
          currentDay: d,
          status: "end",
          endDay: null
        });
      }
      if (this.state.status === "end") {
        //判断结束日期是否在开始日期之前
        console.log("结束日期", dayjs(this.state.currentDay).isAfter(dayjs(d)));
        if (dayjs(this.state.currentDay).isAfter(dayjs(d))) {
          this.setState({
            currentDay: d,
            status: "end",
            endDay: null
          });
        } else {
          this.setState(
            {
              endDay: d,
              status: "start",
              show:false,
            },
            () => {
              this.setchange([this.state.currentDay, this.state.endDay]);
              // this.props.onChange();
            }
          );
        }
      }
    } else {
      this.setState(
        {
          currentDay: d
        },
        () => {
          this.setchange(this.state.currentDay);
        }
      );
    }
  }
  render() {
    const monthele = Array(3)
      .fill(null)
      .map((item, index) => {
        return (
          <Mounth
            key={index}
            whichmounth={dayjs()
              .add(index, "M")
              .format("YYYY-MM")}
            current={this.state.currentDay}
            end={this.state.endDay}
            getDate={this.getDate}
            disabledDate={this.disabledDate} //禁止点击日期
          />
        );
      });
      //判断是否是手机
    if (this.state.show) {
      this.pzl_calendar_style = {
        height: "100%",
        position: "fixed",
        top: "0",
        left: "0",
        width: "100%",
        zIndex: "999",
      };
    } else {
      this.pzl_calendar_style = {};
    }
    return (
      <div className={`pzl_calendar ${this.state.show?'pop_show':''} `} style={this.pzl_calendar_style}>
        <div
          className="inputbar"
          ref="topbar"
          onClick={() => {
            this.handleclick();
          }}
        >
          {React.Children.map(this.props.children, (child, index) => {
            if (child) {
              return child;
            }
          })}
        </div>
        {this.state.show && (
          <div className="Calendar" ref="Calendar" style={this.topstyle}>
            <ul className="weeks">
              <li className="week">日</li>
              <li className="week">一</li>
              <li className="week">二</li>
              <li className="week">三</li>
              <li className="week">四</li>
              <li className="week">五</li>
              <li className="week">六</li>
            </ul>
            <div className="contnet">{monthele}</div>
          </div>
        )}
      </div>
    );
  }
}
